<template>
  <div>
    <el-card>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in 6" :key="item">
          <h3 class="medium" style="text-align: center">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>

      <el-row style="text-align: center;font-size: 20px;">
        <el-col :span="8" style="border-right: 2px solid #373d41">
          <h4 style="color: #99a9bf">步数</h4>
          <h3 >{{step}}</h3>
        </el-col>
        <el-col :span="8" style="border-right: 2px solid #373d41">
          <h4 style="color: #99a9bf">距离(km)</h4>
          <h3>{{totalDistance}}</h3>
        </el-col>
        <el-col :span="8">
          <h4 style="color: #99a9bf">热量（kcal）</h4>
          <h3>{{totalCalories}}</h3>
        </el-col>
      </el-row>

      <div class="schart-box">
        <s-chart class="schart" canvasId="line" :options="options2"></s-chart>
      </div>

      <el-row style="text-align: center">
        <el-col :span="12">
          <el-button type="primary" plain @click="addDialogStep = true">今天的步数</el-button>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" plain v-if="showSelectStep != true" @click="showSelectStep = true">历届数据</el-button>
          <el-button type="primary" plain v-else @click="showSelectStep = false">历届数据</el-button>
        </el-col>
      </el-row>

      <div v-if="showSelectStep">
        <el-divider>
          <span>运动数据</span>
        </el-divider>
        <div>
          <div class="stepBorder">
            <el-row>
              <el-col :span="3">
                <el-avatar style="margin: 15px 0 0 5px" :size="stepAvatar.size" :src="stepAvatar.circleUrl"></el-avatar>
              </el-col>
              <el-col :span="8">
                <p style="font-size: 15px">{{selectStep.username}}</p>
                <p style="font-size: 10px">{{selectStep.date}}</p>
              </el-col>
              <el-col :span="6">
                <h3>步数：{{selectStep.step}}</h3>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-card>

    <el-dialog title="今天的步数" :visible.sync="addDialogStep" width="50%" @close="addStepClosed">
      <el-form :model="stepForm" :rules="addRules" ref="addStepRef" label-width="70px">
        <el-form-item label="步数" prop="step">
          <el-input v-model="stepForm.step"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogStep = false">取 消</el-button>
        <el-button type="primary" @click="addStep">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import sChart from 'vue-schart'
  export default {
    name: "Sport",
    data(){
      return{
        carousel:{},
        step: '1000',
        distance: '',
        calories: '',
        addDialogStep: false,
        options2: {
          type: 'line',
          showGrid: false,
          labels: ['6月', '7月', '8月', '9月', '10月'],
          datasets: [
            {
              label: '步数',
              data: [234, 278, 270, 190, 230]
            }
          ]
        },
        stepForm:{
          step: ''
        },
        addRules: {
          step: [
            { required: true, message: "不能为空", trigger: "blur" },
            { min: 0, max: 6, message: "请认真填写", trigger: "blur" }
          ]
        },
        stepAvatar: {
          size: 'large',
          circleUrl: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        },
        showSelectStep: false,
        selectStep:{
          username: 'lieyan',
          date: '2020-01-20',
          step: '500'
        }
      }
    },
    methods:{
      addStepClosed(){
        this.$refs.addStepRef.resetFields();
      },
      addStep(){
        console.log("111");
      }
    },
    computed:{
      totalDistance(){
        return this.distance = this.step * 0.5 / 1000
      },
      totalCalories(){
        return this.calories = this.step * 0.04
      }
    },
    components: {
      sChart
    },
  }
</script>

<style scoped>
body,html{

}
/*走马灯*/
.el-carousel{
  margin-bottom: 20px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.schart-box {
  display: inline-block;
  margin: 20px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
}
.schart {
  width: 600px;
  height: 400px;
}
  .stepBorder{
    width: 40%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 2px solid #373d41;
    border-radius: 5px;
    float: left;
    box-sizing: border-box;
  }

</style>
